<template>
  <div class="publish-dialog column">
    <q-bar class="row" style="background-color: transparent">
      <div
        class="title non-selectable col text-sub text-no-wrap text-center one-line-text"
      >
        {{ title }}
      </div>
      <q-btn
        text-color="sub"
        dense
        flat
        icon="minimize"
        @click="emit('minimize')"
      />
      <q-btn
        text-color="sub"
        dense
        flat
        icon="mdi-arrow-expand"
        @click="emit('maximize')"
      />
      <q-btn
        text-color="sub"
        dense
        flat
        icon="close"
        @click="emit('close')"
        v-close-popup
      />
    </q-bar>
    <div class="text-sub q-px-md">{{ $t('studio.publish.preview') }}</div>
    <div class="col row main q-gutter-x-md">
      <div class="left-container col fit">
        <video-card :video="video" :hide-languages="true" />
      </div>
      <div class="right-container column q-pa-sm">
        <q-form class="q-gutter-y-sm">
          <div>
            <div class="text-sub">Title</div>
            <q-input
              dense
              borderless
              v-model="title"
              filled
              color="sub"
              bg-color="primary"
              text-color="white"
              input-style="color:#fff;"
              style="border: 1px solid #404040"
            />
          </div>
          <div>
            <div class="text-sub">{{ $t('studio.publish.audioLanguage') }}</div>
            <q-select
              style="border: 1px solid #404040"
              dense
              borderless
              filled
              label-color="white"
              color="sub"
              bg-color="primary"
              v-model="selectedLanugage"
              :options="languages"
            />
          </div>
          <div>
            <div class="text-sub">{{ $t('studio.publish.playlist') }}</div>
            <q-select
              style="border: 1px solid #404040"
              dense
              borderless
              filled
              label-color="white"
              color="sub"
              bg-color="primary"
              v-model="selectedPlaylist"
              :options="playlists"
            >
              <template v-slot:prepend>
                <q-icon name="mdi-playlist-play" color="sub" />
              </template>
            </q-select>
          </div>
          <div>
            <div class="text-sub">{{ $t('studio.publish.visability') }}</div>
            <q-select
              dense
              filled
              v-model="visability"
              :options="visabilityOptions"
              bg-color="primary"
              color="sub"
              style="border: 1px solid #404040"
            >
              <template v-slot:prepend>
                <q-icon
                  v-if="visability"
                  :name="visability.icon"
                  :style="`color: ${visability.color}`"
                />
              </template>
              <template v-slot:option="scope">
                <q-item v-bind="scope.itemProps">
                  <q-item-section avatar>
                    <q-icon
                      :name="scope.opt.icon"
                      :style="`color: ${scope.opt.color}`"
                    />
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>{{ $t(scope.opt.label) }}</q-item-label>
                  </q-item-section>
                </q-item>
              </template>
            </q-select>
          </div>
        </q-form>
      </div>
    </div>
    <q-separator />
    <div class="row footer items-center justify-around q-px-md q-gutter-x-md">
      <div class="col row justify-center">
        <q-linear-progress
          class="progress"
          color="sub"
          track-color="primary"
          :value="progress"
          rounded
        >
          <div class="absolute-full flex flex-center">
            <div class="text-sub text-center text-white">
              Processing Your Audio:{{ progressLabel }}%
            </div>
          </div>
        </q-linear-progress>
      </div>
      <div>
        <q-btn
          rounded
          dense
          icon="mdi-rocket"
          bg-color="#404040"
          class="rocket"
          size="md"
        />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted, PropType } from 'vue';
import LanguageConfig from 'src/models/LanguageConfig';
import VideoCard from 'components/video/LargeVideoCard.vue';
import Video from 'src/models/Video';
import Playlist from 'src/models/Playlist';
import { useUserStore } from 'src/stores/user-store';
import { useGlobalStore } from 'src/stores/global-store';

const emit = defineEmits(['minimize', 'maximize', 'close']);
const props = defineProps({
  video: {
    type: Object as PropType<Video>,
    required: true,
  },
});
const userStore = useUserStore();
const globalStore = useGlobalStore();
const currentUser = computed(() => userStore.currentUser);
const playlists = computed(() => userStore.myPlaylists);
const selectedPlaylist = ref<Playlist | undefined>(undefined);
const languages = computed<LanguageConfig[]>(() => globalStore.languageConfig);
const selectedLanugage = ref<LanguageConfig | null>(null);
const title = ref('untitled');
const progress = ref(0.5);
const progressLabel = computed(() => (progress.value * 100).toFixed(2));
const visabilityOptions = ref([
  {
    id: 1,
    label: 'studio.publish.public',
    icon: 'mdi-cloud-check',
    color: '#13C974',
  },
  {
    id: 5,
    label: 'Private',
    icon: 'mdi-cloud-lock',
    color: '#59B8F8',
  },
  {
    id: 6,
    label: 'Save as Draft',
    icon: 'mdi-file-cloud',
    color: '#F19D30',
  },
]);
const visability = ref<any | undefined>(undefined);
onMounted(async () => {
  await userStore.getMyPlaylists();
});
</script>
<style lang="scss" scoped>
.publish-dialog {
  width: 771px;
  height: 541px;
  background-color: #1e1e1e;
  padding: 0px !important;
  overflow: hidden;
  .main {
    padding: 5px 16px 16px 16px;
    .right-container {
      width: 228px;
      height: 100%;
      background-color: #1c1c1c;
      border: 1px solid #404040;
    }
  }
  .footer {
    height: 50px;
    .progress {
      height: 24px;
      border-radius: 15px;
      background-color: #101010;
    }
    .rocket {
      background-color: #404040;
      color: $sub;
    }
  }
}
</style>
